Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix web components webpack integration docs #20429

Merged
merged 2 commits into from
Nov 2, 2021
Merged

fix web components webpack integration docs #20429

merged 2 commits into from
Nov 2, 2021

Conversation

chrisdholt
Copy link
Member

@chrisdholt chrisdholt commented Nov 1, 2021 •
edited
Loading

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

Fixes web component integration docs to accommodate a breaking change they made in a minor version and updates the package to latest FAST packages.

Focus areas to test

(optional)

@chrisdholt chrisdholt self-assigned this Nov 1, 2021
@size-auditor
Copy link

size-auditor bot commented Nov 1, 2021 •
edited
Loading

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 42315bf9bdc7810cd0fba0cc77ecb975d95ea86e (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 1, 2021 •
edited
Loading

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 04f870b:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 1, 2021 •
edited
Loading

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)		 57.788 kB
18.186 kB
react-avatar
Avatar		 54.966 kB
15.674 kB
react-badge
Badge		 23.195 kB
6.992 kB
react-badge
CounterBadge		 25.655 kB
7.688 kB
react-badge
PresenceBadge		 30.674 kB
8.821 kB
react-button
Button		 25.595 kB
7.765 kB
react-button
CompoundButton		 30.852 kB
8.715 kB
react-button
MenuButton		 27.62 kB
8.44 kB
react-button
SplitButton		 33.731 kB
9.623 kB
react-button
ToggleButton		 34.821 kB
8.416 kB
react-card
Card - All		 49.008 kB
14.564 kB
react-card
Card		 44.495 kB
13.343 kB
react-card
CardFooter		 8.141 kB
3.43 kB
react-card
CardHeader		 9.461 kB
3.883 kB
react-card
CardPreview		 8.434 kB
3.604 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover		 169.429 kB
48.08 kB
react-components
react-components: FluentProvider & webLightTheme		 32.201 kB
10.665 kB
react-divider
Divider		 15.61 kB
5.646 kB
react-image
Image		 9.784 kB
3.982 kB
react-input
Input		 16.751 kB
5.533 kB
react-label
Label		 8.965 kB
3.713 kB
react-link
Link		 11.659 kB
4.704 kB
react-make-styles
makeStaticStyles (runtime)		 7.59 kB
3.321 kB
react-make-styles
makeStyles + mergeClasses (runtime)		 22.235 kB
8.408 kB
react-make-styles
makeStyles + mergeClasses (build time)		 2.558 kB
1.204 kB
react-menu
Menu (including children components)		 105.802 kB
32.207 kB
react-menu
Menu (including selectable components)		 108.078 kB
32.58 kB
react-popover
Popover		 101.166 kB
30.376 kB
react-portal
Portal		 6.725 kB
2.237 kB
react-positioning
usePopper		 23.145 kB
7.942 kB
react-provider
FluentProvider		 15.16 kB
5.58 kB
react-slider
RangedSlider		 41.432 kB
11.976 kB
react-slider
Slider		 34.81 kB
10.862 kB
react-switch
Switch		 26.615 kB
8.562 kB
react-text
Text - Default		 11.351 kB
4.424 kB
react-text
Text - Wrappers		 14.42 kB
4.729 kB
react-theme
Teams: all themes		 25.712 kB
6.17 kB
react-theme
Teams: Light theme		 17.215 kB
5.116 kB
react-tooltip
Tooltip		 45.556 kB
15.549 kB
react-utilities
SSRProvider		 213 B
170 B
🤖 This report was generated against 42315bf9bdc7810cd0fba0cc77ecb975d95ea86e

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 1, 2021 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1028 1059 5000
BaseButton mount 1061 1034 5000
Breadcrumb mount 2889 2890 1000
ButtonNext mount 574 565 5000
Checkbox mount 1757 1868 5000
CheckboxBase mount 1508 1518 5000
ChoiceGroup mount 5393 5401 5000
ComboBox mount 1090 1111 1000
CommandBar mount 11138 11094 1000
ContextualMenu mount 6960 7028 1000
DefaultButton mount 1262 1278 5000
DetailsRow mount 4239 4110 5000
DetailsRowFast mount 4135 4140 5000
DetailsRowNoStyles mount 3903 3972 5000
Dialog mount 2819 2808 1000
DocumentCardTitle mount 173 194 1000
Dropdown mount 3593 3569 5000
FluentProviderNext mount 3381 3424 5000
FluentProviderWithTheme mount 207 217 10
FluentProviderWithTheme virtual-rerender 112 109 10
FluentProviderWithTheme virtual-rerender-with-unmount 256 260 10
FocusTrapZone mount 1998 1925 5000
FocusZone mount 1897 1920 5000
IconButton mount 1995 1990 5000
Label mount 364 386 5000
Layer mount 3274 3287 5000
Link mount 538 527 5000
MakeStyles mount 1921 1943 50000
MenuButton mount 1639 1651 5000
MessageBar mount 2158 2227 5000
Nav mount 3651 3702 1000
OverflowSet mount 1222 1249 5000
Panel mount 2670 2649 1000
Persona mount 921 953 1000
Pivot mount 1557 1572 1000
PrimaryButton mount 1437 1467 5000
Rating mount 8759 8825 5000
SearchBox mount 1533 1536 5000
Shimmer mount 2817 2879 5000
Slider mount 2153 2184 5000
SpinButton mount 5557 5572 5000
Spinner mount 476 473 5000
SplitButton mount 3496 3480 5000
Stack mount 587 588 5000
StackWithIntrinsicChildren mount 1972 1965 5000
StackWithTextChildren mount 5367 5382 5000
SwatchColorPicker mount 11896 11640 5000
TagPicker mount 2953 3049 5000
TeachingBubble mount 14151 14209 5000
Text mount 498 484 5000
TextField mount 1552 1635 5000
ThemeProvider mount 1309 1312 5000
ThemeProvider virtual-rerender 675 682 5000
ThemeProvider virtual-rerender-with-unmount 2144 2118 5000
Toggle mount 973 952 5000
buttonNative mount 139 166 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
TreeWith60ListItems.default 234 199 1.18:1
AttachmentMinimalPerf.default 203 179 1.13:1
ChatMinimalPerf.default 800 705 1.13:1
ChatDuplicateMessagesPerf.default 375 342 1.1:1
TableMinimalPerf.default 490 446 1.1:1
GridMinimalPerf.default 400 366 1.09:1
AnimationMinimalPerf.default 470 441 1.07:1
BoxMinimalPerf.default 423 394 1.07:1
ListWith60ListItems.default 742 694 1.07:1
AvatarMinimalPerf.default 232 219 1.06:1
ButtonMinimalPerf.default 219 206 1.06:1
ChatWithPopoverPerf.default 454 427 1.06:1
ToolbarMinimalPerf.default 1111 1047 1.06:1
DropdownManyItemsPerf.default 807 768 1.05:1
FormMinimalPerf.default 490 468 1.05:1
ListCommonPerf.default 735 701 1.05:1
TextMinimalPerf.default 433 413 1.05:1
TextAreaMinimalPerf.default 604 574 1.05:1
TreeMinimalPerf.default 921 877 1.05:1
CardMinimalPerf.default 658 635 1.04:1
CheckboxMinimalPerf.default 3023 2909 1.04:1
FlexMinimalPerf.default 332 319 1.04:1
ImageMinimalPerf.default 447 429 1.04:1
SplitButtonMinimalPerf.default 5137 4936 1.04:1
IconMinimalPerf.default 745 717 1.04:1
TableManyItemsPerf.default 2295 2207 1.04:1
VideoMinimalPerf.default 731 706 1.04:1
AttachmentSlotsPerf.default 1180 1143 1.03:1
CarouselMinimalPerf.default 540 525 1.03:1
InputMinimalPerf.default 1443 1402 1.03:1
LayoutMinimalPerf.default 403 392 1.03:1
ListMinimalPerf.default 584 565 1.03:1
ProviderMinimalPerf.default 1288 1253 1.03:1
ReactionMinimalPerf.default 438 424 1.03:1
DialogMinimalPerf.default 835 819 1.02:1
DividerMinimalPerf.default 399 393 1.02:1
DropdownMinimalPerf.default 3412 3352 1.02:1
LabelMinimalPerf.default 438 430 1.02:1
ListNestedPerf.default 633 619 1.02:1
MenuMinimalPerf.default 972 951 1.02:1
PopupMinimalPerf.default 654 642 1.02:1
RadioGroupMinimalPerf.default 510 502 1.02:1
HeaderSlotsPerf.default 862 853 1.01:1
ItemLayoutMinimalPerf.default 1342 1333 1.01:1
PortalMinimalPerf.default 196 195 1.01:1
RefMinimalPerf.default 260 257 1.01:1
SegmentMinimalPerf.default 389 386 1.01:1
TooltipMinimalPerf.default 1155 1146 1.01:1
DatepickerMinimalPerf.default 6044 6031 1:1
EmbedMinimalPerf.default 4705 4691 1:1
SkeletonMinimalPerf.default 394 393 1:1
CustomToolbarPrototype.default 4499 4495 1:1
HeaderMinimalPerf.default 406 409 0.99:1
LoaderMinimalPerf.default 755 766 0.99:1
SliderMinimalPerf.default 1852 1879 0.99:1
AccordionMinimalPerf.default 182 185 0.98:1
ButtonOverridesMissPerf.default 1977 2010 0.98:1
ButtonSlotsPerf.default 626 636 0.98:1
MenuButtonMinimalPerf.default 1804 1835 0.98:1
ProviderMergeThemesPerf.default 1858 1891 0.98:1
StatusMinimalPerf.default 787 805 0.98:1
AlertMinimalPerf.default 318 327 0.97:1
RosterPerf.default 1317 1372 0.96:1

@chrisdholt chrisdholt force-pushed the users/chhol/fix-webpack-docs-web-components branch from 35005a4 to 04f870b Compare November 2, 2021 01:55
@chrisdholt
Copy link
Member Author

@Hotell are you able to sign-off on this for Fluent Build? We need to get this in for the release tonight ideally. Thanks!

@ecraig12345 ecraig12345 merged commit 71d4e11 into microsoft:master Nov 2, 2021
@chrisdholt chrisdholt deleted the users/chhol/fix-webpack-docs-web-components branch November 2, 2021 05:30
mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022
@chrisdholt
fix web components webpack integration docs (microsoft#20429)
4579e28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@robarbms robarbms robarbms approved these changes

@ecraig12345 ecraig12345 ecraig12345 approved these changes

@EisenbergEffect EisenbergEffect EisenbergEffect approved these changes

@nicholasrice nicholasrice Awaiting requested review from nicholasrice

Assignees

@chrisdholt chrisdholt

Labels
web-components
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@chrisdholt @fabricteam @EisenbergEffect @ecraig12345 @robarbms